<template>
    <div class="article-manager">
        <div class="i-layout-page-header">
          <div class="i-layout-page-header">
            <span class="ivu-page-header-title">{{title}}</span>
            <div>
              <Tabs v-model="currentTab" @on-click="changeTab">
                <TabPane :icon="item.icon" :label="item.label" :name="item.value.toString()" v-for="(item,index) in headerList" :key="index"/>
              </Tabs>
            </div>
          </div>
        </div>
        <Card :bordered="false" dis-hover class="ivu-mt fromBox">
            <Tabs type="card" v-model="childrenId" v-if="headerChildrenList.length" @on-click="changeChildrenTab">
                <TabPane :label="item.label" :name="item.id.toString()" v-for="(item,index) in headerChildrenList" :key="index"></TabPane>
            </Tabs>
            <form-create :option="option"  :rule="rules" @on-submit="onSubmit" v-if="rules.length!==0"></form-create>
            <Spin size="large" fix v-if="spinShow"></Spin>
        </Card>
    </div>
</template>

<script>
    import formCreate from '@form-create/iview'
    import { headerListApi, dataFromApi } from '@/api/setting'
    import request from '@/libs/request'
    export default {
        name: 'setting_setSystem',
        components: { formCreate: formCreate.$form() },
        data () {
            return {
                rules: [],
                option: {
                    form: {
                        labelWidth: 185
                    },
                  submitBtn:{
                      col:{
                        span:3,
                        push:3
                      }
                  },
                    global: {
                        upload: {
                            props: {
                                onSuccess (res, file) {
                                    if (res.status === 200) {
                                        file.url = res.data.src
                                    } else {
                                        this.$Message.error(res.msg)
                                    }
                                }
                            }
                        },
                      frame:{
                        props:{
                          closeBtn:false,
                          okBtn:false
                        }
                      }
                    }
                },
                spinShow: false,
                FromData: null,
                currentTab: '',
                headerList: [],
                headerChildrenList: [],
                childrenId: '',
                title: ''
            }
        },
        created () {
            this.getAllData()
        },
        watch: {
            $route (to, from) {
                this.headerChildrenList = []
                this.getAllData()
            },
            childrenId () {
                this.getFrom()
            }
        },
        methods: {
            childrenList () {
                let that = this
                that.headerList.forEach(function (item) {
                    if (item.value.toString() === that.currentTab) {
                      if(item.children === undefined){
                        that.childrenId = item.id;
                        that.headerChildrenList=[];
                      } else {
                        that.headerChildrenList = item.children
                        that.childrenId = item.children.length ? item.children[0].id.toString() : ''
                      }
                    }
                })
            },
            // 头部tab
            getHeader () {
                this.spinShow = true
                return new Promise((resolve, reject) => {
                    let tab_id = this.$route.params.tab_id;
                    let data = {
                        type: this.$route.params.type ? this.$route.params.type : 0,
                        pid: tab_id ? tab_id : 0
                    }
                    headerListApi(data).then(async res => {
                        let config = res.data.config_tab
                        this.headerList = config
                        this.currentTab = config[0].value.toString()
                        this.childrenList()
                        resolve(this.currentTab)
                        this.spinShow = false
                    }).catch(err => {
                        this.spinShow = false
                        this.$Message.error(err)
                    })
                })
            },
            // 表单
            getFrom () {
                this.spinShow = true
                return new Promise((resolve, reject) => {
                    let ids = ''
                    if (this.$route.params.type === '3') {
                        ids = this.$route.params.tab_id
                    } else {
                        if (this.childrenId) {
                            ids = this.childrenId
                        } else {
                            ids = this.currentTab
                        }
                    }
                    let data = {
                        tab_id: Number(ids)
                    }
                    let logistics = 'freight/config/edit_basics',agent = 'agent/config/edit_basics',
                        integral = 'marketing/integral_config/edit_basics',sms = 'serve/sms_config/edit_basics',
                        config = 'setting/config/edit_basics';
                    let url = this.$route.name === 'setting_logistics'?logistics:this.$route.name === 'setting_distributionSet'?
                        agent:this.$route.name === 'setting_message'?sms:this.$route.name === 'setting_setSystem'?config:integral;
                    dataFromApi(data,url).then(async res => {
                        this.spinShow = false
                        if (res.data.status === false) {
                            return this.$authLapse(res.data)
                        }
                        this.FromData = res.data
                        this.rules = res.data.rules
                        this.title = res.data.title
                    }).catch(res => {
                        this.spinShow = false
                        this.$Message.error(res.msg)
                    })
                })
            },
            async getAllData () {
                if (this.$route.params.type !== '3') {
                    await this.getHeader()
                } else {
                    this.headerList = []
                    this.getFrom()
                }
            },
            // 选择
            changeTab () {
                this.childrenList()
            },
            // 二级选择
            changeChildrenTab (name) {
                this.childrenId = name
            },
            // 提交表单 group
            onSubmit (formData) {
                request({
                    url: this.FromData.action,
                    method: this.FromData.method,
                    data: formData
                }).then(res => {
                    this.$Message.success(res.msg)
                }).catch(res => {
                    this.$Message.error(res.msg)
                })
            }
        }
    }
</script>

<style scoped lang="stylus">
  .ivu-tabs{
    margin-bottom: 18px;
  }
.fromBox{
    min-height 600px;
}
</style>
